<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery Tooltip Plugin Demo</title>

<link rel="stylesheet" href="../jquery.formtip.css" />
<link rel="stylesheet" href="screen.css" />
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.bgiframe.js" type="text/javascript"></script>
<script src="../lib/jquery.dimensions.js" type="text/javascript"></script>
<script src="../lib/jquery.delegate.js" type="text/javascript"></script>
<script src="../jquery.formtip.js" type="text/javascript"></script>

<script src="chili-1.7.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
	$("form:first").formtip();
	$("form.test").formtip({
		positionParent: function(element) {
			return element.parent();
		},
		left: -5
	});
});
</script>

<style type="text/css">
form.test div {
	width: 250px;
	border: 1px solid black;
	float: left;
	margin: 1em;
}

form.test p {
	border: 1px solid #999;
}
</style>

</head>
<body>
<h1 id="banner"><a
	href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/">jQuery
Tooltip Plugin</a> Demo</h1>
<div id="main">
<form>
<fieldset id="set1"><legend>Three elements with
tooltips, default settings</legend> <a
	title="A tooltip with default settings, the href is displayed below the title"
	href="http://google.de">Link to google</a> <br />
<label title="A label with a title and default settings, no href here"
	for="text1">Input something please!</label> <br />
<input
	title="Note that the tooltip disappears when clicking the input elementthe input elementthe input element"
	type="text" value="Test" name="action" id="text1" />

<h3>Code</h3>
<pre><code class="mix">$('#set1 *').tooltip();</code></pre> <input
	title="Another tooltip element I" type="text" value="Test" /></fieldset>
</form>

<form class="test">
<div>
<p><label>II</label><input title="Another tooltip element II"
	type="text" value="Test" /></p>
<p><label>III</label><input title="Another tooltip element III"
	type="text" value="Test" /></p>
</div>
<div style="width: 200px"><input
	title="Another tooltip element IV" type="text" value="Test" /> <br />
<input type="text" value="Test" /> <br />
<input title="Another tooltip element VI" type="text" value="Test" /></div>
</form>

</div>
<script src="http://www.google-analytics.com/urchin.js"
	type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2623402-1";
urchinTracker();
</script>
</body>
</html>